<template>
    <div class="">
        <div class="tag ">
            <div class="tag_list items" :style="index == list.length-1 ? 'background: '+colorEnd+';' : 'background: '+color+';padding:'+padding+';' "
                v-for="(item, index) in list">
                <div class="tag_list_name">{{item.name}}</div>
                <div v-if="iconFlag" class="items">
                    <img v-if="index == list.length-1" class="tag_list_img" src="/src/assets/icons/delete.png" alt="">
                    <img v-else class="tag_list_img" src="/src/assets/icons/close_2.png" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {ref} from 'vue';

interface TagItem {
    name: string,
}

// 组件传来的值
defineProps({
    // 数据
    list: {
        type: Array as () => TagItem[],
        default: [],
    },
    // 是否显示图标
    iconFlag: {
        type: Boolean,
        default: 'false',
    },
    // 按钮背景颜色
    color: {
        type: String,
    },
    // 清除全部按钮背景颜色
    colorEnd: {
        type: String,
    },
    //tag大小 根据内边距来
    padding: {
        type: String,
        default: '16px 20px',
    },
    // // 接收父组件传来的宽高属性
    // iconWeight: {
    //     type: String,
    //     default: '16px',
    // },
    // iconHeight: {
    //     type: String,
    //     default: '16px',
    // },
})

</script>

<style lang="less" scoped>
.items{
    display: flex;
    align-items: center;
}

.tag{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.tag_list {
    border-radius: 8px;
    // background: #0070E9;
    margin-right: 16px;
    color: #FFFFFF;
    margin-bottom: 20px;

    .tag_list_name {
        font-family: PingFang SC;
        font-size: 16px;
        font-weight: 400;
        line-height: 16px;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
    }

    .tag_list_img {
        width: 20px;
        height: 20px;
        margin-left: 10px;
    }
}
</style>
